/**
* 作者 ：食草狂魔
*
* 日期 ：2017/10/26
*
* 描述 ：系统管理 - 用户管理
*/
<template>
  <el-container class="is-vertical">
    <HeaderBar :menuState="menuState"></HeaderBar>
    <BreadCrumb :options="breadOptions" class="breadcreamb"></BreadCrumb>
    <el-container class="is-horizontal systemManageContainer">
      <el-aside>
        <div class="treeBar">
          <div class="treeTitle">
            <h5>系统管理</h5>
          </div>
          <LeftBar :leftState="leftState"></LeftBar>
        </div>
      </el-aside>
      <el-main>
        <ModuleBar :title="moduleBarTitle" class="roleTitle"></ModuleBar>
        <MTable :options="tableOptions" ref="myTable" class="tablebar"></MTable>
      </el-main>
    </el-container>
    <Dialog :options="dialogOptions" class="addRoleDialog">
      <AddUserForm slot="dialogContent" :parentModel="roleModel" v-if="dialogOptions.visible"></AddUserForm>
    </Dialog>
    <Dialog :options="dialogOptions2" class="addRoleDialog">
      <UpdateUserForm slot="dialogContent" v-if="dialogOptions2.visible" :parentModel="roleModel" :updateUserformData="updateUserformData"></UpdateUserForm>
    </Dialog>
    <Dialog :options="dialogOptions3" class="classification">
      <Classification slot="dialogContent"></Classification>
    </Dialog>
  </el-container>
</template>
<script>
  import userAPIs from '../../api/userAPIs'
  import HeaderBar from '../../components/header/Header.vue'
  import BreadCrumb from '../../components/breadcrumb/BreadCrumb.vue'
  import LeftBar from './components/LeftBar.vue'
  import ModuleBar from '../../components/modulebar/ModuleBar.vue'
  import MTable from '../../components/table/Table.vue'
  import Dialog from '../../components/dialog/Dialog.vue'
  import AddUserForm from './components/addUserForm/AddUserForm.vue'
  import UpdateUserForm from './components/updateUserForm/updateUserForm.vue'
  import Classification from './components/classification/Classification.vue'

  export default {
    name: 'user',
    components: {
      HeaderBar,
      BreadCrumb,
      LeftBar,
      ModuleBar,
      MTable,
      Dialog,
      AddUserForm,
      UpdateUserForm,
      Classification
    },
    data() {
      return {
        menuState: "/systemManage/main",
        leftState: "/systemManage/main",
        breadOptions: {
          bread: [
            {
              label: "政务数据资源管理系统",
              path: "/"
            }, {
              label: "系统管理",
              path: "/systemManage/main"
            }
          ]
        },
        moduleBarTitle: "用户管理",
        tableOptions: {
          handleSelectionChange(rows) {

          }
        },
        dialogOptions: {
          visible: false,
          title: "添加用户"
        },
        dialogOptions2: {
          visible: false,
          title: "修改用户"
        },
        dialogOptions3: {
          visible: false,
          title: "关联分类"
        },
	      selectRows:[],
        createTimeToStart: +new Date("1971/01/01 00:00:00"),
        createTimeToEnd: +new Date("2030/01/01 00:00:00"),
        roleModel:this,
        updateUserformData: {}
      }
    },
    mounted: function () {
      let vm = this,
        pageNo = 1,
        pageSize = 20;

        vm.userLoad(pageNo,pageSize)
    },
    methods: {
    	userLoad(pageNo,pageSize){
    		let vm = this
    		userAPIs.list({
	        token: localStorage.token,
	        pageNum: pageNo,
	        pageSize: pageSize,
	        createTimeToStart:vm.createTimeToStart,
	        createTimeToEnd:vm.createTimeToEnd
	      }).then(({ data }) => {
	      	if(data.code == 10000){
	      		console.log(data)
	      		vm.initTable(data.data, pageNo, pageSize, data.total)
	      	}
	      });
    	},
    	userExamine(sysUserId){
    		let vm = this
        vm.$confirm('确认删除此用户吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
	    		userAPIs.delete({
		        token: localStorage.token,
		        key:sysUserId
		      }).then(({ data }) => {
		      	if(data.code == 10000){
		      		console.log(data)
		      		vm.$message.success("删除成功！");
		      		vm.userLoad(vm.tableOptions.pageInfo.currentPage, vm.tableOptions.pageInfo.pageSize)
		      	}
		      });
        }).catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    	},
      initTable(dataList, pageNo, pageSize, total) {
        let vm = this
        let vuex = vm.$store.state.systemManage.pages.role
        vm.tableOptions = {
          thead: [{
            prop: "userName", // 数据的key值
            label: "姓名", // 显示的标题
          }, {
            prop: "accound", // 数据的key值
            label: "登录名", // 显示的标题
          }, {
            prop: "sex", // 数据的key值
            label: "性别", // 显示的标题
            formatter (row, column, cellValue) {
              switch (cellValue) {
                case 1 :
                  return "男"
                  break
                case 2 :
                  return "女"
                  break
              }
            }
          }, {
            prop: "phone", // 数据的key值
            label: "手机号码", // 显示的标题
          }, {
            prop: "email", // 数据的key值
            label: "邮箱", // 显示的标题
          }, {
            prop: "createTime", // 数据的key值
            label: "创建时间", // 显示的标题
          }],
          operation: {
            items: [{
              xtype: "link",
              buttonText: "查看",
              onClick(i, row) {
                vm.updateUserformData = row
                vm.dialogOptions2.visible = true
                console.log(vm.updateUserformData);
              }
            },{
              xtype: "link",
              buttonType: "danger", // 按钮样式
              buttonText: "删除",
              style: "color:red;",
              onClick(i, row) {
                console.log(row)
                vm.userExamine(row.sysUserId);
              }
            }]
          },
          data: dataList,
          pageInfo: {
            currentPage: pageNo,
            pageSizes: [20, 40, 60, 80],
            pageSize: pageSize,
            layout: "prev, pager, next, total, sizes, jumper",
            total: total,
            handleSizeChange(val) {
              vm.changePageSize(val)
            },
            handleCurrentChange(val) {
              vm.loadMore(val)
            }
          },
          handleSelectionChange(rows) {
            console.log(rows.length)
            vm.selectRows = rows;
          },
          selection: {
            width: 55
          },
	        toolbar: [{
	        	xtype: "toolbarRow",
            items:[{
	            xtype: "text",
	            defaultText: "姓名",
	            ref: "userName",
	            containerStyle:"margin-right:20px"
	          }, {
	            xtype: "datepicker",
	            defaultText: "开始时间",
	            ref: "startTime",
	            containerStyle:"margin-right:20px",
              value: vuex.createTimeToStart==""?"":new Date(vuex.createTimeToStart)
	          },{
	            xtype: "datepicker",
	            defaultText: "终止时间",
	            ref: "endTime",
	            containerStyle:"margin-right:20px",
              value: vuex.createTimeToEnd==""?"":new Date(vuex.createTimeToEnd)
	          }, {
	            xtype: "button",
	            buttonType: "primary", // 按钮样式
	            buttonText: "查询",
	            className: "firButton",
	            style:"width:100px;background: #076dc1;margin-right:20px;padding:0;height:40px",
	            onClick() {
	            	let params = {
                  userName: vm.$refs.myTable.getRefs("userName").$refs.input.value,
                  createTimeToStart: vm.$refs.myTable.getRefs("startTime").value || "",
                  createTimeToEnd: vm.$refs.myTable.getRefs("endTime").value || ""
                }
                // 查询条件记录到状态树
                vm.$store.dispatch('searchTable', params)

	              userAPIs.list({
					        token: localStorage.token,
					        pageNum: pageNo,
					        pageSize: pageSize,
					        userName:vm.$refs.myTable.getRefs("userName").$refs.input.value,
					        createTimeToStart:+vm.$refs.myTable.getRefs("startTime").value || vm.createTimeToStart,
					        createTimeToEnd:+vm.$refs.myTable.getRefs("endTime").value+24*60*60*1000 || vm.createTimeToEnd
					      }).then(({ data }) => {
	      				  vm.initTable(data.data, pageNo, pageSize, data.total)
					      });
	            }
	          }, {
	            xtype: "button",
	            buttonType: "primary", // 按钮样式
	            buttonText: "添加",
	            className: "",
	            style:"width:100px;background: #076dc1;margin-right:20px;padding:0;height:40px",
	            onClick() {
	              vm.dialogOptions.visible = true
	            }
	          }, {
	            xtype: "button",
	            buttonType: "danger", // 按钮样式
	            buttonText: "全部删除",
	            style:"width:100px;margin-right:20px;padding:0;height:40px",
	            onClick(i,row) {
	              let codeAll = "";
	              if(vm.selectRows.length == 0){
	              	vm.$message({
				            type: 'warning',
				            message: '您还没有选择数据!'
				          });
	              }else{
		              for(let i=0;i<vm.selectRows.length;i++){
		              	codeAll += vm.selectRows[i].sysUserId +","
		              };
		              console.log(codeAll);
									vm.userExamine(codeAll);
	              }
	            }
	          }]
          }]
        }
      }
    }
  }
</script>
<style>
  @import './stylus/common.styl';
  .systemManageContainer .roleTitle{
  	width: 100%;
  	margin-bottom: 20px;
  }
</style>
